<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Editar Menu</title>
        <link href="recursos/editor.css" rel="stylesheet" type="text/css" />
        <script>
            function cambio(editar){
               if (editar==true)
                   top.frames['frame'].location.href="editarPagina.xhtml";                
               else
                   top.frames['frame'].location.href="consultarPagina.xhtml";                
           }           
           function crearComplete(xhr, status, args){               
                if(args.eliminarPrincipal){
                    eliminarPrincipal.show();
                }else if(args.correcto){
                    correcto.show();
                }else if(args.incorrecto){
                    incorrecto.show();
                }else if(args.vacio){
                    vacio.show();
                }else if(args.yaExiste){
                    yaExiste.show();
                }else if(args.noHijo){
                    noHijo.show();
                }
            }            
        </script>
    </h:head>
    <h:body>
        <h:form>
            <!--Encabezado de la página -->
            <div id="encabezado"/>

            <!-- Parte donde se mostrarán las opciones relacionadas con el indice de la página web -->
            <div id="menu">
                <p:panel>
                    <p:tree id="treeSingle" value="#{editarMenu.menu}" var="node"
                            nodeSelectListener="#{editarMenu.seleccionarPagina}"
                            selectionMode="single" selection="#{editarMenu.paginaSeleccionada}" expanded="true" onselectComplete="cambio(false)"
                            update="nombreP, anadir, eliminar, editar"> 
                        <p:treeNode>
                            <h:outputText value="#{node}"/>
                        </p:treeNode>
                    </p:tree>
                </p:panel>                
                <p:panel>
                    <table>
                        <tr>
                            <td colspan="3">
                                <p:inputText id="nombreP" value="#{editarMenu.nombrePagina}" disabled="#{editarMenu.paginaSeleccionada==null}"
                                             styleClass="textoI"/> 
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <p:commandButton id="anadir" value="Añadir" action="#{editarMenu.annadirPagina}"
                                                 update="treeSingle" disabled="#{editarMenu.paginaSeleccionada==null}" oncomplete="crearComplete(xhr, status, args)"/>  
                            </td>
                            <td>
                                <p:commandButton id="eliminar" value="Eliminar" action="#{editarMenu.quitarPagina}" oncomplete="crearComplete(xhr, status, args)" 
                                                 update="treeSingle" disabled="#{editarMenu.paginaSeleccionada==null}" />  
                            </td>
                            <td>
                                <p:commandButton id="editar" value="Editar" action="#{editarMenu.editarElementoMenu}" oncomplete="cambio(true)"
                                                 disabled="#{editarMenu.paginaSeleccionada==null}"/>   
                            </td>
                        </tr>
                    </table>
                </p:panel>
                <h:panelGrid columns="2">
                    <p:commandButton value="Guardar" action="#{editarMenu.guardarMenu}" oncomplete="crearComplete(xhr, status, args)"
                                     update="lista" styleClass="boton" style="margin-left: 20px;" />
                    <p:commandButton value="Cancelar" onclick="volverDialog.show();" styleClass="boton"/>
                </h:panelGrid>
            </div>

            <!--Frame que cargará lo que corresponda en cada caso. -->
            <div id="contenido">
                <iframe name="frame" id="frame"/>
            </div>

            <!--Dialogo que me permite ir a la zona privada sin guardar los cambios -->
            <p:confirmDialog message="¿Desea volver sin guardar los cambios?" severity="infor" widgetVar="volverDialog" modal="true"
                             closable="false" styleClass="dialogoNormal">
                <p:commandButton value="Aceptar" action="zonaP.xhtml" ajax="false" onclick="volverDialog.hide();" styleClass="boton"/>
                <p:commandButton value="Cancelar" onclick="volverDialog.hide();" styleClass="boton"/>
            </p:confirmDialog>

            <!--Dialogo de confirmación que nos indica que el elemento principal no se puede borrar -->
            <p:confirmDialog message="El elemento principal no se puede eliminar." severity="info" widgetVar="eliminarPrincipal" modal="true"
                             styleClass="dialogoGrande"/>

            <!--Dialogo de confirmación que nos indica que hay que escribir un nombre para añadir un indice -->
            <p:confirmDialog message="Debe de escribir un nombre para el nuevo elemento de indice" severity="info" 
                             widgetVar="vacio" modal="true"  styleClass="dialogoGrande"/>
            
            <!--Dialogo de confirmación que nos indica que hay que escribir un nombre para añadir un indice -->
            <p:confirmDialog message="Todos los hijos de principal deben de tener al menos un hijo." severity="info" 
                             widgetVar="noHijo" modal="true"  styleClass="dialogoGrande"/>

            <!--Dialogo de confirmación que nos indica ya existe un indice con ese nombre -->
            <p:confirmDialog message="Ya existe un elemento de indice con ese nombre." severity="info" 
                             widgetVar="yaExiste" modal="true"  styleClass="dialogoGrande"/>

            <!--Dialogo de confirmación que nos indica que las operaciones se han realizado correctamente -->
            <p:confirmDialog message="Correcto." severity="info" widgetVar="correcto" modal="true" closable="true"  styleClass="dialogoNormal">
                <h:panelGrid columns="2" cellspacing="2">
                    <p:commandButton value="Cargar Web" action="#{editarMenu.cargarWeb}" ajax="false" styleClass="boton"/>
                    <p:commandButton value="Zona Privada" action="zonaP.xhtml" ajax="false" styleClass="boton"/>
                </h:panelGrid>
            </p:confirmDialog>

            <!--Dialogo de confirmación que nos indica que faltan indices por asociar con paginas -->
            <p:confirmDialog message="Los siguientes elementos deben ser editados." severity="info" widgetVar="incorrecto" modal="true" styleClass="dialogoNormal">
                <p:dataList id="lista" value="#{editarMenu.listaPaginas}" var="pagina" itemType="disc" styleClass="textoI">  
                    #{pagina}  
                </p:dataList> 
            </p:confirmDialog>
        </h:form>
    </h:body>
</html>